<template>
<div class="box">
    <h3>vue-router模块的加载和使用</h3>
    <p>1.自动化路由模块加载安装:在项目初始化阶段(vue create),通过选择路由模块完成安装和文件的自动配置</p>
    <hr>
    <h3>2.手动安装路由模块并定义路由配置文件(后续的项目开发中不会用的)</h3>
    <ul>
        <li>安装路由模块: npm install vue-router -S|--save 【如果vue核心库为2.0版本，路由模块最高支持到3.0】</li>
        <li>路由模块创建和加载: 
            <ul>
                <li>在创建路由模块的文件中使用 import { createRouter } from "vueRouter" 加载路由构建方法</li>
                <li>通过执行 createRouter 方法构建路由对象，但该方法必须提供相关配置【options api 规则】</li>
                <li>
                    在main.js项目启动引导文件中完成路由模块的导入和加载;导入的模块为vue插件对象数据，通过 .use 方法完成集成
                    <br>
                    路由集成过程中，程序运行可能会出现错误，因为createRouter方法调用时，必须提供 history 和 routes 选项配置
                    <br>
                    + history 路由模式配置【后续课程详细讲解】; 最简单取值 路由模块提供 createWebHashHistory() <br>
                    + routes 路由表配置【后续课程详细讲解】；最简单取值 []
                </li>
            </ul>
        </li>
        <li>路由功能的使用:
            <ul>
                <li>使用路由模块提供的内置组件 ＜router-view＞ 取代动态组件 ＜component＞</li>
                <li>
                    所有需要以地址方式操作的vue组件页面，统一由路由配置 routes 进行统一管理 <br>
                    管理 页面组件和地址的对应关系 <br>
                    <pre>
                        routes:[
                            {
                                path:描述路径,
                                component:描述组件
                            },
                            ……
                        ]
                    </pre>
                </li>
                <li>
                    项目中使用由路由模块提供的内置组件 ＜router-link＞＜router-link＞ 完成地址切换
                    <ul>
                        <li>该组件必须绑定 to 属性，取值为路由表定义的组件地址</li>
                        <li>该组件渲染的默认标签是 a 标签 </li>
                        <li>
                            如果需要渲染的标签不是a标签，首先需要完成 custom 布尔类型属性的定义； <br>
                            通过v-slot的默认作用域解构分发，获取导航方法 navigate 【 v-slot:default="{ navigate }" 】<br>
                            在自定义分发标签上以v-on完成事件绑定，取值 navigate 导航回调函数 <br>
                            需要注意：如果未使用custom属性，会出现分发标签被包裹在 a 标签内部的情况 <br>
                            <pre>
                            ＜RouterLink v-else ：to="nav.page" custom ＃default="｛ navigate ｝"＞
                                ＜span ＠click="navigate"＞｛｛  nav.name   ｝ ｝＜/span＞
                            ＜/RouterLink＞
                            </pre>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</template>

<script setup>

</script>

<style lang="sass" scoped>

</style>